<template>
  <view class="tabbar">
    <!-- 下方菜单切换 -->
    <view class="menucss">
      <view class="tabbox" @click="menuclick(0)">
        <view class="tabimg">
          <image src=""></image>
        </view>
        <view class="tabname">
          
        </view>
      </view>
    </view>
    <view class="fabubox">
      <u-mask :show="fabushow" @click="fabushow = false" :duration="400"  :zoom="true" :custom-style="{background: 'rgba(255, 255, 255, 0.93)'}">
        <view :class="fabushow ?'zujian': 'Switchmodel'">
          <dly :show="'fabushow'" @fabuguanbi="guanbi" @tap.stop></dly>
        </view>
      </u-mask>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pages: [
        {
          path: '/pages/index/index',
          iconPath: '../../static/tabbar-icons/shouye-off@2x.png',
          text: '首页'
        },
        {
          path: '/pages/release/release',
          iconPath: '../../static/tabbar-icons/fabu-off@2x.png',
          text: '发布'
        },
        {
          path: '/pages/news/news',
          iconPath: '../../static/tabbar-icons/xiaoxi-off@2x.png',
          text: '消息'
        },
        {
          path: '/pages/me/me',
          iconPath: '../../static/tabbar-icons/wode-on@2x.png',
          text: '我的'
        },
      ],

      fabushow: false,
    }
  },

  methods: {
    //菜单栏跳转
    menuclick(type) {
      uni.redirectTo({
			  url: pages[type]
      })
    },
    fabuclick() {
      this.fabushow = true
    },
    guanbi() {
      this.fabushow = true
    },
  },
}
</script>

<style lang="scss" scoped>
/* 下方菜单 */
.menucss {
	width: 750rpx;
	height: 98rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	z-index: 9;
	display: flex;
	justify-content: center;
	padding-top: 11rpx;


	.tabbox {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.tabimg {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.tabname {

			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #343434;
		}
	}
}

.fabubox {
	width: 750rpx;
	text-align: center;

	.zujian {
		margin-top: 624rpx;
		transition: all 0.5s;
	}

	.Switchmodel {
		margin-top: 1024rpx;
		transition: all 0.5s;
	}
}
</style>